<template>
  <div>
    <div id="container" style="height: 250px; border: 1px solid #666"></div>
    <el-divider content-position="left">健身房列表</el-divider>
   
    <el-table :data="gyms">
      <el-table-column label="健身房图片" prop="store_image">
        <template slot-scope="scope">
          <img :src="scope.row.store_image" width="200px" alt="" />
        </template>
      </el-table-column>
      <el-table-column
        sortable
        prop="name"
        label="健身房名称"
        width="250px"
      >
        <template slot-scope="scope">
          <i class="el-icon-video-camera"></i>
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="健身房详细地址">
        <template slot-scope="scope">
          <i class="el-icon-s-flag"></i>
          {{ scope.row.store_address }}
        </template>
      </el-table-column>
      <el-table-column label="健身房位置" width="230px">
        <template slot-scope="scope">
          {{ scope.row.province }}
          {{ scope.row.city }}
          {{ scope.row.area }}
        </template>
      </el-table-column>
      <el-table-column label="营业时间" width="230px">
        <template slot-scope="scope">
          {{ scope.row.banking_time }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230px">
        <template slot-scope="scope">
          <el-button
          @click="moveTo(scope.$index)"
            size="small"
            type="info"
            icon="el-icon-position"
            circle
          ></el-button>

          
          <el-button
          @click="$router.push(`/home/coach-list/${scope.row.store_id}`)"
            size="small"
            type="success"
            icon="el-icon-thumb"
            circle
          ></el-button>

          <el-button
          @click="$router.push('/home/gym-update?store_id='+scope.row.store_id)"
            size="small"
            type="warning"
            icon="el-icon-edit"
            circle
          ></el-button>

          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="deleteGyms(scope.row.store_id)"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <!-- <el-pagination
      layout="->,total,prev,pager,next,jumper"
      :current-page="gymData.page"
      :total="gymData.total"
      :page-size="gymData.pagesize"
      @current-change="changeCurrent($event)"
    >
    </el-pagination> -->
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import httpApi from '@/http'
export default {
  data() {
    return {
      gymname:'',//双向数据绑定 绑定文本框的值
      gyms: [], //
      gymData: {
        page: 1,
        pagesize: 100,
        result: [],
        total: 0,
      },
    };
  },
  mounted() {
    this.listGyms();

    // 加载地图
    // this.initMap()
  },

  // 列出所有影院
  methods: {

    // 将地图中心点移动到某一个健身房的位置
    moveTo(index){
      let c = this.gyms[index]
      let position = [c.longitude,c.dimension] //坐标
      console.log(position);
      if(this.map){
        this.map.setZoomAndCenter(14,position)
      }
    },

    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "8bace27665d0513fa5b988530be30abd", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
          });
          // 给每一个健身房都添加点标记
          this.gyms.forEach((item) => {
            let lng = item.longitude;
            let lat = item.dimension;
            // 创建点标记 Marker显示在地图上
            let marker = new AMap.Marker({
              position: [lng, lat],
              title: item.name,
            });
            this.map.add(marker);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    // 当前页码改变时触发
    changeCurrent(page) {
      console.log(page);
      this.gymData.page = page; //修改当前页码
      this.search();
    },
    submit() {
      this.gymData.page = 1;
      this.search();
    },

    // 模糊查询电影列表
    search() {
      if (this.gymname.trim() == "") {
        this.listGyms();
      } else {
        this.listGymsByName();
      }
    },

    // 通过关键字查询列表
    listGymsByName() {
      let params = {
        page: this.gymData.page,
        pagesize: this.gymData.pagesize,
        name: this.gymname,
      };
      httpApi.gymApi.queryGymsByName(params).then((res)=>{
        this.gymData = res.data.data
      })
      // httpApi.movieApi.queryMoviesByName(params).then((res) => {
      //   this.movieData = res.data.data;
      // });
    },

    // // 列出所有健身房
    listGyms() {
      let params = {
        page: this.gymData.page,
        pagesize: this.gymData.pagesize,
      }
      httpApi.gymApi.queryAll(params).then((res) => {
        console.log("加载所有健身房", res);
        this.gyms = res.data.data;
        // 初始化地图
        this.initMap();
      });
    },

    // 删除健身房
    deleteGyms(store_id){
      console.log(store_id);
      // 发送http请求，执行删除业务
      httpApi.gymApi.delete({store_id}).then((res)=>{
        console.log('健身房删除结果',res);
        this.listGyms()
      })
    }
  },
};
</script>

<style lang="scss" scoped>
</style>